<template>
  <div>
    <el-dialog title="本地可配置菜单名称路径查看" :visible.sync="visible" center :modal-append-to-body="false" :destroy-on-close="true" @close='closeDialog'>
      <div class='box'>
        <div v-for="(item,index) in dataList" :key="'item'+index" class="box_item">
          <div>
            <div class="box_title"><i class="el-icon-menu"></i>{{item.meta.title}} <i class="el-icon-right"></i>{{item.path}} </div>
            <div>
              <div v-for="(t,i) in item.children" :key="'item'+i" class="box_item_title">
                <div>菜单名称：{{t.meta.title}}</div>
                <div>菜单路径 <i class="el-icon-right"></i>{{t.path}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: ['visible'],
  data() {
    return {
      dataList: [],

    }
  },
  methods: {
    closeDialog() {
      this.$emit('routerListHide')
    }
  },
  mounted() {
    var rout = this.$router.options.routes;
    for (var i = 3; i < rout.length; i++) {
      this.dataList.push(rout[i])
    }
    console.log(this.dataList)
  }
}
</script>
<style scoped>
.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.box_title {
  font-size: 18px;
  font-weight: bold;
  /* margin-bottom: 10px; */
}
.box_item_title {
  font-size: 15px;
  padding-bottom: 10px;
  padding-top: 10px;
  border-bottom: 1px solid;
  display: flex;
  justify-content: space-between;
  /* font-weight: bold; */
}
.box_item {
  width: 48%;
  padding-bottom: 10px;
}
.box_item_title div {
  width: 60%;
}
.box_item_title div:nth-child(1) {
  width: 40%;
}
</style>
